50 Junior Web Developer Interview Questions You Can't Miss
According Seek.com.au there are 225 Junior Web Development jobs were found in Australia at the end of 2018 with an average salary of AU$59,862 per year. Check our ultimate junior web developer interview questions and answers list to land your first dev job!
Q1: Explain equality in JavaScript
JavaScript has both strict and type–converting comparisons:
- Strict comparison (e.g., ===) checks for value equality without allowing coercion
- Abstract comparison (e.g. ==) checks for value equality with coercion allowed
var a = "42";
var b = 42;
a == b; // true
a === b; // falseSome simple equalityrules:
- If either value (aka side) in a comparison could be the
trueorfalsevalue, avoid==and use===. - If either value in a comparison could be of these specific values (
0,"", or[]-- empty array), avoid==and use===. - In all other cases, you're safe to use
==. Not only is it safe, but in many cases it simplifies your code in a way that improves readability.
Q2: Explain meta tags in HTML
- Meta tags always go inside head tag of the HTML page
- Meta tags is always passed as name/value pairs
- Meta tags are not displayed on the page but intended for the browser
- Meta tags can contain information about character encoding, description, title of the document etc,
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="I am a web page with description">
<title>Home Page</title>
</head>
<body>
</body>
</html>Q3: Explain the three main ways to apply CSS styles to a web page
Using the inline style attribute on an element
<div>
<p style="color: maroon;"></p>
</div>Using a <style> block in the <head> section of your HTML
<head>
<title>CSS Refresher</title>
<style>
body {
font-family: sans-serif;
font-size: 1.2em;
}
</style>
</head>Loading an external CSS file using the <link> tag
<head>
<title>CSS Refresher</title>
<link rel="stylesheet" href="/css/styles.css" />
</head>Q4: What npm is used for?
npm is used for?npm stands for Node Package Manager. npm provides the following two main functionalities:
- Online repositories for Node.js packages/modules which are searchable on search.nodejs.org
- Command-line utility to install packages, do version management and dependency management of Node.js packages.
- Another important use for npm is dependency management. When you have a node project with a package.json file, you can run npm install from the project root and npm will install all the dependencies listed in the package.json.
Q5: What is Git?
Git is a Distributed Version Control system (DVCS). It can track changes to a file and allows you to revert back to any particular change.
Its distributed architecture provides many advantages over other Version Control Systems (VCS) like SVN one major advantage is that it does not rely on a central server to store all the versions of a project’s files.
Q6: What is SQL injection?
Injection attacks stem from a lack of strict separation between program instructions (i.e., code) and user-provided (or external) input. This allows an attacker to inject malicious code into a data snippet.
SQL injection is one of the most common types of injection attack. To carry it out, an attacker provides malicious SQL statements through the application.
How to prevent:
- Prepared statements with parameterized queries
- Stored procedures
- Input validation - blacklist validation and whitelist validation
- Principle of least privilege - Application accounts shouldn’t assign DBA or admin type access onto the database server. This ensures that if an application is compromised, an attacker won’t have the rights to the database through the compromised application.
Q7: What is CSS?
CSS stands for Cascading Style Sheets. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS was intended to allow web professionals to separate the content and structure of a website's code from the visual design.
Q8: What is Scope in JavaScript?
Scope in JavaScript?In JavaScript, each function gets its own scope. Scope is basically a collection of variables as well as the rules for how those variables are accessed by name. Only code inside that function can access that function's scoped variables.
A variable name has to be unique within the same scope. A scope can be nested inside another scope. If one scope is nested inside another, code inside the innermost scope can access variables from either scope.
Q9: What is meant by Continuous Integration?
Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day. Each check-in is then verified by an automated build, allowing teams to detect problems early.
Q10: Write a HTML table tag sequence that outputs the following
Write a HTML table tag sequence that outputs the following:
50 pcs 100 500
10 pcs 5 50Answer:
<table>
<tr>
<td>50 pcs</td>
<td>100</td>
<td>500</td>
</tr>
<tr>
<td>10 pcs</td>
<td>5</td>
<td>50</td>
</tr>
</table>Q11: Describe floats and how they work
floats and how they workFloat is a CSS positioning property. Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage.
#sidebar {
float: right; // left right none inherit
}The CSS clear property can be used to be positioned below left/right/both floated elements.
Q12: Describe what User Interface (UI) Design does mean for you?
User Interface (UI) design is the design of software or websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible. Good user interface design puts emphasis on goals and completing tasks, and good UI design never draws more attention to itself than enforcing user goals.
Q13: Explain Null and Undefined in JavaScript
Null and Undefined in JavaScriptJavaScript (and by extension TypeScript) has two bottom types: null and undefined. They are intended to mean different things:
- Something hasn't been initialised :
undefined. - Something is currently unavailable:
null.
Q14: Explain event bubbling and how one may prevent it
Event bubbling is the concept in which an event triggers at the deepest possible element, and triggers on parent elements in nesting order. As a result, when clicking on a child element one may exhibit the handler of the parent activating.
One way to prevent event bubbling is using event.stopPropagation() or event.cancelBubble on IE < 9.
Q15: Explain the CSS box model and the layout components that it consists of
box model and the layout components that it consists ofThe CSS box model is a rectangular layout paradigm for HTML elements that consists of the following:
- Content - The content of the box, where text and images appear
- Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content)
- Border - A border surrounding the padding (if any) and content
- Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)
Q16: Explain the difference between local and global npm packages installation
npm packages installationThe main difference between local and global packages is this:
- local packages are installed in the directory where you run
npm install <package-name>, and they are put in thenode_modulesfolder under this directory - global packages are all put in a single place in your system (exactly where depends on your setup), regardless of where you run
npm install -g <package-name>
In general, all packages should be installed locally.
- This makes sure you can have dozens of applications in your computer, all running a different version of each package if needed.
- Updating a global package would make all your projects use the new release, and as you can imagine this might cause nightmares in terms of maintenance, as some packages might break compatibility with further dependencies, and so on.
Q17: Given a string, reverse each word in the sentence
For example Welcome to this Javascript Guide! should be become emocleW ot siht tpircsavaJ !ediuG
var string = "Welcome to this Javascript Guide!";
// Output becomes !ediuG tpircsavaJ siht ot emocleW
var reverseEntireSentence = reverseBySeparator(string, "");
// Output becomes emocleW ot siht tpircsavaJ !ediuG
var reverseEachWord = reverseBySeparator(reverseEntireSentence, " ");
function reverseBySeparator(string, separator) {
return string.split(separator).reverse().join(separator);
}Q18: Have you played around with the new CSS Flexbox or Grid specs?
Flexbox or Grid specs?Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.
Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Have tried Flexbox before but ran into some browser incompatibility issues (Safari) in using flex-grow, and I had to rewrite my code using inline-blocks and math to calculate the widths in percentages, it wasn't a nice experience.
Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.
Q19: How Can I Get Indexed Better by Search Engines?
It is possible to get indexed better by placing the following two statements in the <HEAD> part of your documents:
<META NAME="keywords" CONTENT="keyword keyword keyword keyword">
<META NAME="description" CONTENT="description of your site">Both may contain up to 1022 characters. If a keyword is used more than 7 times, the keywords tag will be ignored altogether. Also, you cannot put markup (other than entities) in the description or keywords list.
Q20: How does the Centralized Workflow work?
The Centralized Workflow uses a central repository to serve as the single point-of-entry for all changes to the project. The default development branch is called master and all changes are committed into this branch.
Developers start by cloning the central repository. In their own local copies of the project, they edit files and commit changes. These new commits are stored locally.
To publish changes to the official project, developers push their local master branch to the central repository. Before the developer can publish their feature, they need to fetch the updated central commits and rebase their changes on top of them.
Compared to other workflows, the Centralized Workflow has no defined pull request or forking patterns.
Q21: What does use strict do?
use strict do?The use strict literal is entered at the top of a JavaScript program or at the top of a function and it helps you write safer JavaScript code by throwing an error if a global variable is created by mistake. For example, the following program will throw an error:
function doSomething(val) {
"use strict";
x = val + 10;
}`It will throw an error because x was not defined and it is being set to some value in the global scope, which isn't allowed with use strict The small change below fixes the error being thrown:
function doSomething(val) {
"use strict";
var x = val + 10;
}Q22: What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
- Bootstrap - Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Add a spinner button component, as it is widely used.
- Semantic UI - Source code structure makes theme customization extremely hard to understand. Its unconventional theming system is a pain to customize. Hardcoded config path within the vendor library. Not well-designed for overriding variables unlike in Bootstrap.
- Bulma - A lot of non-semantic and superfluous classes and markup required. Not backward compatible. Upgrading versions breaks the app in subtle manners.
Q23: What is Cross Site Scripting (XSS)?
By using Cross Site Scripting (XSS) technique, users executed malicious scripts (also called payloads) unintentionally by clicking on untrusted links and hence, these scripts pass cookies information to attackers.
Q24: What is DOM (Document Object Model) and how is it linked to CSS?
The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document.
With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. The DOM specifies interfaces which may be used to manage XML or HTML documents.
When a browser displays a document, it must combine the document's content with its style information. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
Q25: What is Sass?
Sass or Syntactically Awesome StyleSheets is a CSS preprocessor that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.
A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.
Q26: What is a Polyfill?
A polyfill is essentially the specific code (or plugin) that would allow you to have some specific functionality that you expect in current or “modern” browsers to also work in other browsers that do not have the support for that functionality built in.
- Polyfills are not part of the HTML5 standard
- Polyfilling is not limited to Javascript
Q27: What is impersonation?
Impersonation is an act of pretending to be another person. For IT Systems impersonation means that some specific users (usually Admins) could get an access to other user's data.
Q28: What is the difference between span and div?
divis a block elementspanis inline element
For bonus points, you could point out that it’s illegal to place a block element inside an inline element, and that while div can have a p tag, and a p tag can have a span, it is not possible for span to have a div or p tag inside.
Q29: You need to update your local repos. What git commands will you use?
It’s a two steps process. First you fetch the changes from a remote named origin:
git fetch originThen you merge a branch master to local:
git merge origin/masterOr simply:
git pull origin masterIf origin is a default remote and ‘master’ is default branch, you can drop it eg. git pull.
Q30: Could you explain the Gitflow workflow?
Gitflow workflow employs two parallel long-running branches to record the history of the project, master and develop:
- Master - is always ready to be released on LIVE, with everything fully tested and approved (production-ready).
- Hotfix - Maintenance or “hotfix” branches are used to quickly patch production releases. Hotfix branches are a lot like release branches and feature branches except they're based on
masterinstead ofdevelop.
- Develop - is the branch to which all feature branches are merged and where all tests are performed. Only when everything’s been thoroughly checked and fixed it can be merged to the
master. - Feature - Each new feature should reside in its own branch, which can be pushed to the
developbranch as their parent one.
Q31: Describe Closure concept in JavaScript as best as you could
Consider:
function makeAdder(x) {
// parameter `x` is an inner variable
// inner function `add()` uses `x`, so
// it has a "closure" over `x`
function add(y) {
return y + x;
};
return add;
}Reference to inner add function returned is able to remember what x value was passed to makeAdder function call.
var plusOne = makeAdder( 1 ); // x is 1, plusOne has a reference to add(y)
var plusTen = makeAdder( 10 ); // x is 10
plusOne(3); // 1 (x) + 3 (y) = 4
plusTen(13); // 10 (x) + 13 (y) = 23 In C and most other common languages, after a function returns, all the local variables are no longer accessible because the stack-frame is destroyed.
In JavaScript, if you declare a function within another function, then the local variables can remain accessible after returning from the function you called.
A closure is a stack frame which is allocated when a function starts its execution, and not freed after the function returns (as if a 'stack frame' were allocated on the heap rather than the stack!). In JavaScript, you can think of a function reference variable as having both a pointer to a function as well as a hidden pointer to a closure.
Q32: Explain the difference between undefined and not defined in JavaScript
undefined and not defined in JavaScriptIn JavaScript if you try to use a variable that doesn't exist and has not been declared, then JavaScript will throw an error var name is not defined and the script will stop execute thereafter. But If you use typeof undeclared_variable then it will return undefined.
Before starting further discussion let's understand the difference between declaration and definition.
var x is a declaration because you are not defining what value it holds yet, but you are declaring its existence and the need of memory allocation.
var x; // declaring x
console.log(x); //output: undefinedvar x = 1 is both declaration and definition (also we can say we are doing initialisation), Here declaration and assignment of value happen inline for variable x, In JavaScript every variable declaration and function declaration brings to the top of its current scope in which it's declared then assignment happen in order this term is called hoisting.
A variable that is declared but not define and when we try to access it, It will result undefined.
var x; // Declaration
if(typeof x === 'undefined') // Will return trueA variable that neither declared nor defined when we try to reference such variable then It result
not defined.
console.log(y); // Output: ReferenceError: y is not definedQ33: Explain the difference between cookies, session and local storage
Cookies
- Limited storage space 4096 bytes / ~4 kb
- Only allow to store data as strings
- Stored data is sent back to server on every HTTP request such as HTML, CSS, Images etc,
- Can store only 20 cookies per domain
- In total 300 cookies are allowed on a site
- Setting HTTP only flag will prevent accessing cookies via javascript
- Can set expiration duration for auto deletion (can be set either from server or client)
Example:
// Set with expiration & path
document.cookie = "name=Gokul; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/;";
// Get
document.cookie;
// Delete by setting empty value and same path
document.cookie = "name=; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/;";Session Storage
- Storage space is 5 mb / ~5120 kb
- Storage space may vary a little based on the browser
- Only allow to store data as strings
- Data is available per window or tab
- Once window or tab is closed stored data is deleted
- Data will be only available on same origin
Example:
// Set
sessionStorage.setItem("name", "gokul");
// Get
sessionStorage.getItem("name"); // gokul
// Delete
sessionStorage.removeItem("name");
// Delete All
sessionStorage.clear();Local Storage
- Storage space is 5 mb / ~5120 kb
- Storage space may vary a little based on the browser
- Only allow to store data as strings
- Data will be only available on same origin
- Data is persistant (untill explicitly deleted)
- API is similar to session storage
Example:
// Set
localStorage.setItem("name", "gokul");
// Get
localStorage.getItem("name"); // gokul
// Delete
localStorage.removeItem("name");
// Delete All
localStorage.clear();Q34: Given two strings, return true if they are anagrams of one another
For example: Mary is an anagram of Army
var firstWord = "Mary";
var secondWord = "Army";
isAnagram(firstWord, secondWord); // true
function isAnagram(first, second) {
// For case insensitivity, change both words to lowercase.
var a = first.toLowerCase();
var b = second.toLowerCase();
// Sort the strings, and join the resulting array to a string. Compare the results
a = a.split("").sort().join("");
b = b.split("").sort().join("");
return a === b;
}Q35: How to compare two objects in JavaScript?
Two non-primitive values, like objects (including function and array) held by reference, so both == and === comparisons will simply check whether the references match, not anything about the underlying values.
For example, arrays are by default coerced to strings by simply joining all the values with commas (,) in between. So two arrays with the same contents would not be == equal:
var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";
a == c; // true
b == c; // true
a == b; // falseFor deep object comparison use external libs like deep-equal or implement your own recursive equality algorithm.
Q36: How to create a zebra striped table with CSS?
To create a zebra-striped table, use the nth-child() selector and add a background-color to all even (or odd) table rows:
tr:nth-child(even) {
background-color: #f2f2f2
}Q37: What do you know about Serverless model?
Serverless refers to a model where the existence of servers is hidden from developers. It means you no longer have to deal with capacity, deployments, scaling and fault tolerance and OS. It will essentially reducing maintenance efforts and allow developers to quickly focus on developing codes.
Examples are:
- Amazon AWS Lambda
- Azure Functions
Q38: What is CSS preprocessor and why to user one?
A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.
Here are a few of the most popular CSS preprocessors:
- SASS (SCSS)
- LESS
- Stylus
- PostCSS
Q39: What is ClickJacking?
ClickJacking is an attack that fools users into thinking they are clicking on one thing when they are actually clicking on another. The attack is possible thanks to HTML frames (iframes).
Its other name, user interface (UI) redressing, better describes what is going on. Users think they are using a web page’s normal UI, but in fact there is a hidden UI in control; in other words, the UI has been redressed. When users click something they think is safe, the hidden UI performs a different action.
Q40: What is a Grid System in CSS?
A grid system is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Grid systems include two key components: rows and columns.
Some Grid Systems:
- Simple Grid
- Pure
- Flexbox Grid
- Bootstrap
- Foundation
Q41: What is the purpose of cache busting and how can you achieve it?
Browsers have a cache to temporarily store files on websites so they don't need to be re-downloaded again when switching between pages or reloading the same page. The server is set up to send headers that tell the browser to store the file for a given amount of time. This greatly increases website speed and preserves bandwidth.
However, it can cause problems when the website has been changed by developers because the user's cache still references old files. This can either leave them with old functionality or break a website if the cached CSS and JavaScript files are referencing elements that no longer exist, have moved or have been renamed.
Cache busting is the process of forcing the browser to download the new files. This is done by naming the file something different to the old file.
A common technique to force the browser to re-download the file is to append a query string to the end of the file.
src="js/script.js"=>src="js/script.js?v=2"
The browser considers it a different file but prevents the need to change the file name.
Q42: What will be the output of the following code?
var y = 1;
if (function f() {}) {
y += typeof f;
}
console.log(y);Above code would give output 1undefined. If condition statement evaluate using eval so eval(function f() {}) which return function f() {} which is true so inside if statement code execute. typeof f return undefined because if statement code execute at run time, so statement inside if condition evaluated at run time.
var k = 1;
if (1) {
eval(function foo() {});
k += typeof foo;
}
console.log(k);Above code will also output 1undefined.
var k = 1;
if (1) {
function foo() {};
k += typeof foo;
}
console.log(k); // output 1functionQ43: What's new in HTML 5?
HTML 5 adds a lot of new features to the HTML specification
New Doctype
Still using that pesky, impossible-to-memorize XHTML doctype?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">If so, why? Switch to the new HTML5 doctype. You'll live longer -- as Douglas Quaid might say.
<!DOCTYPE html>New Structure
<section>- to define sections of pages<header>- defines the header of a page<footer>- defines the footer of a page<nav>- defines the navigation on a page<article>- defines the article or primary content on a page<aside>- defines extra content like a sidebar on a page<figure>- defines images that annotate an article
New Inline Elements
These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time:
<mark>- to indicate content that is marked in some fashion<time>- to indicate content that is a time or date<meter>- to indicate content that is a fraction of a known range - such as disk usage<progress>- to indicate the progress of a task towards completion
New Form Types
<input type="datetime"><input type="datetime-local"><input type="date"><input type="month"><input type="week"><input type="time"><input type="number"><input type="range"><input type="email"><input type="url">
New Elements
There are a few exciting new elements in HTML 5:
<canvas>- an element to give you a drawing space in JavaScript on your Web pages. It can let you add images or graphs to tool tips or just create dynamic graphs on your Web pages, built on the fly.<video>- add video to your Web pages with this simple tag.<audio>- add sound to your Web pages with this simple tag.
No More Types for Scripts and Links
You possibly still add the type attribute to your link and script tags.
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>This is no longer necessary. It's implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>Make your content editable
The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>Attributes
requireto mention the form field is requiredautofocusputs the cursor on the input field
Rust has been Stack Overflow’s most loved language for four years in a row and emerged as a compelling language choice for both backend and system developers, offering a unique combination of memory safety, performance, concurrency without Data races...
Clean Architecture provides a clear and modular structure for building software systems, separating business rules from implementation details. It promotes maintainability by allowing for easier updates and changes to specific components without affe...
Azure Service Bus is a crucial component for Azure cloud developers as it provides reliable and scalable messaging capabilities. It enables decoupled communication between different components of a distributed system, promoting flexibility and resili...
FullStack.Cafe is a biggest hand-picked collection of top Full-Stack, Coding, Data Structures & System Design Interview Questions to land 6-figure job offer in no time.
Coded with 🧡 using React in Australia 🇦🇺
by @aershov24, Full Stack Cafe Pty Ltd 🤙, 2018-2023
Privacy • Terms of Service • Guest Posts • Contacts • MLStack.Cafe
based on 86 Trustpilot 
Reviews